import {Component, OnInit, ViewEncapsulation, ChangeDetectorRef, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs";
import {ActivatedRoute, Router} from "@angular/router";
import {MineService} from "@mine/mine.service";
import {ToolbarService} from "@shared/components/toolbar/toolbar.service";
import {ToolsService} from "@shared/service/tools/tools.service";


@Component({
  selector: 'area-picker',
  templateUrl: './area-picker.component.html',
  styleUrls: ['./area-picker.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AreaPickerComponent implements OnInit, OnDestroy {
  public ProvHascity = false;
  public allArea: any;
  public allCity: any;
  public chooseProv: any;
  public chooseCity: any;
  public hasChooseProv = false;
  public width = '0px';
  public pageLeft = '0px';
  public wrapHeight = '0px';
  public nowArea = 'provin';
  public screenWidth = 0;
  public subscription: Subscription = new Subscription();
  public fromPage: string; // 从那个页面跳过来 @author ouyqx-691
  constructor(public mineSer: MineService,
              public router: Router,
              public tools: ToolsService,
              public toolBarService: ToolbarService,
              public route: ActivatedRoute,
              public cdref: ChangeDetectorRef) {
    this.screenWidth = document.documentElement.clientWidth;

  }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      // console.log(params)
      this.fromPage = params['from'];
    });
    this.dataInit();
  }

  dataInit() {
    this.tools.showLoading();
    const screenHeight = document.documentElement.clientHeight;
    this.subscription.add(
      this.mineSer.getArea().subscribe(res => {
        this.tools.hideLoading();
        if (res.result === '0') {
          this.allArea = res.data.dictTreeNodeVOList;
        }
      })
    );
    this.width = (this.screenWidth * 2) + 'px';
    const titleHeight = document.querySelector('.title').clientHeight;
    const navHeight = document.querySelector('.top').clientHeight;
    // let headerHeight = document.querySelector('seed-toolbar-header').clientHeight;
    this.wrapHeight = (screenHeight - titleHeight - navHeight) + 'px';
  }


  /**
   * 选择省份之后匹配该省的所有市
   * @param i:number
   */
  choosingProv(i) {
    this.chooseProv = this.allArea[i];
    const title = this.chooseProv['title'];
    if (title === '北京市'
      || title === '上海市'
      || title === '天津市'
      || title === '重庆市'
      || title === '澳门特别行政区'
      || title === '香港'
      || title === '台湾省'
    ) {
      this.ProvHascity = false;
      const data = {
        areaProv: this.chooseProv['areaId'],
        areaCity: this.chooseProv['areaId']
      };
      this.tools.showLoading();
      this.mineSer.UserInfoUpdate(data).subscribe(res => {
        this.tools.hideLoading();
        if (res.result === '0') {
          this.router.navigate(['/mine/setting/profile']);
        } else {
          this.tools.showToast('请求失败，请从新选择~');
        }
      });
    } else {
      this.ProvHascity = true;
      this.nowArea = 'city';
      this.allCity = this.allArea[i]['dictTreeNodeList'];
      this.pageLeft = (0 - this.screenWidth) + 'px';
    }
  }

  /**
   * 点击选择城市
   * @param i 选择城市的索引
   */
  choosingCity(i) {
    this.chooseCity = this.allCity[i];
    const data = {
      areaProv: this.chooseProv['areaId'],
      areaCity: this.chooseCity['areaId']
    };
    this.mineSer.UserInfoUpdate(data).subscribe(res => {
      if (res.result === '0') {
        if (this.fromPage === 'order') {
          this.router.navigate(['/payment/detail']);
        } else {
          this.router.navigate(['/mine/setting/profile']);
        }
      } else {
        this.tools.showToast('请求失败，请从新选择~');
      }
    });
  }

  showProvin() {
    this.pageLeft = 0 + 'px';
    this.nowArea = 'provin';
  }

  showCity() {
    this.pageLeft = (0 - this.screenWidth) + 'px';
    this.nowArea = 'city';
  }

  ngOnDestroy() {
    // window.history.back();
  }
}
